<template>
    <div class="list" ref="wrapper"> 
        <div>
            <div class="area">
                <h3 class="title border-topbottom">当前城市</h3>
                <div class="button-list">
                    <div class="button-box">
                        <div class="button">{{this.currentCity}}</div>
                    </div>
                </div>
            </div>
            <div class="area">
                <h3 class="title border-topbottom">热门城市</h3>
                <div class="button-list">
                    <div class="button-box" 
                        v-for="item of hotCities" 
                        :key="item.id"
                        @click="handleCityClick(item.name)">
                        <div class="button">{{item.name}}</div>
                    </div>
                        
                </div>
            </div>
            <div class="area" 
                v-for = "(item, key) of cities" 
                :key = "key" 
                :ref = "key">
                <h3 class="title border-topbottom">{{key}} </h3>
                <div class="item-list">
                    <div class='item border-bottom' 
                        v-for="iteminner of item" 
                        :key="iteminner.id" 
                        @click="handleCityClick(iteminner.name)"
                        >
                            {{iteminner.name}}
                    </div>
                    
                </div>
            </div>
            
        </div>    
    </div>
</template>

<script>
// import Bscroll from 'better-scroll'
import Bscroll from 'better-scroll'
import { mapState, mapMutations } from 'vuex'
export default {
    props:{
        hotCities: Array,
        cities: Object,
        letter: String
    },
    name: 'CityList',
    computed:{
        ...mapState({
            currentCity: 'city',
        })
    },
    mounted () {
    this.scroll = new Bscroll(this.$refs.wrapper)
    },
    watch: {
        letter () {
            console.log(this.letter)
            if(this.letter){
                const element = this.$refs[this.letter][0]
                this.scroll.scrollToElement(element)
            }
        }
    },
    methods: {
        handleCityClick (city) {
            // alert(city)
            // this.$store.dispatch('changeCity',city)
            //  this.$store.commit('changeCity',city)
            this.changeCity(city)
             //点击跳转指定的页面
             this.$router.push('/')
        },
        ...mapMutations(['changeCity'])
    }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .border-topbottom
        &:before
            border-color: #c8c8c8
        &:after
            border-color: #c8c8c8
    .list
        overflow: hidden
        position: absolute
        top:1.6rem
        left:0
        right:0
        bottom: 0
        .title{
            width: 100%
            height 0.4rem
            line-height: .4rem
            padding-left: .2rem
            background:#f5f5f5
            font-size: .24rem
        }
        .button-list
            padding: .1rem;
            overflow: hidden;
            .button-box
                float: left;
                width: 32%
                .button
                    margin: .1rem
                    padding: .1rem 0
                    text-align: center
                    border: .02rem solid #ccc
                    
        .item-list
            .item
                line-height: .74rem
                padding-left: .2rem
            .border-bottom
            &:after
                border-color: #c8c8c8

</style>

